<template>
    <div class="rollbagadd">
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>新建组合券包</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="活动名称" :required='true'>
                            <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                            <div class="yb_margin lh16">建议名称由“店铺名+原总价+代金劵”组成</div>
                        </el-form-item>
                        <el-form-item label="活动时间" :required='true'>
                            <el-date-picker
                                    v-model="timeData"
                                    type="datetimerange"
                                    align="right"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['08:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="卡券组合" :required='true'>
                            <el-radio-group v-model="form.type">
                                <el-radio label="1">品牌代金券</el-radio>
                            </el-radio-group>
                            <div class="flex" v-for="(item,index) in form.coupon" :key="index">
                                <div>
                                    <div>类型</div>
                                    <div class="cusipw">
                                        <el-select v-model="timeType" placeholder="请选择" disabled>
                                            <el-option label="代金券" value="1"></el-option>
                                        </el-select>
                                    </div>
                                </div>
                                <div class="mar_l20">
                                    <div>使用门槛</div>
                                    <div class="cusipw">
                                        <el-input v-model="item.fullMoney" placeholder="请输入金额" @change='priceChange' type="number">
                                            <template slot="append">元</template>
                                        </el-input>
                                    </div>
                                </div>
                                <div class="mar_l20">
                                    <div>券金额</div>
                                    <div class="cusipw">
                                        <el-input v-model="item.money" @change='priceChange' placeholder="请输入金额" type="number">
                                            <template slot="append">元</template>
                                        </el-input>
                                    </div>
                                </div>
                                <div class="mar_l20">
                                    <div>可用张数</div>
                                    <div class="cusipw">
                                        <el-input v-model="item.num" placeholder="请输入张数" type="number">
                                            <template slot="append">张</template>
                                        </el-input>
                                    </div>
                                </div>
                                <el-button size="small" type="text" @click="delfullArr(index)"
                                           class="fon_12 mar_l20 mar_t20">删除
                                </el-button>
                            </div>
                            <el-button v-show="form.coupon.length<10" type="text" @click="addfullArr" class="mar_t10">
                                <Icon type="md-add"/>
                                添加代金券,最多10种
                            </el-button>

                            <div class="flex">
                                <div>
                                    <div>原总价</div>
                                    <div class="cusipw">
                                        <el-input v-model="form.price"  type="number">
                                            <template slot="append">元</template>
                                        </el-input>
                                    </div>
                                </div>
                                <div class="mar_l20">
                                    <div>现总售价</div>
                                    <div class="cusipw">
                                        <el-input v-model="form.money" placeholder="请输入金额" type="number">
                                            <template slot="append">元</template>
                                        </el-input>
                                    </div>
                                </div>
                            </div>
                            <div class="yb_margin lh16">原总价 = 券金额 * 可用张数，现总售价为顾客需付款金额</div>
                        </el-form-item>
                        <el-form-item label="封面图">
                            <div class="uploadSource bor_de rel flex" v-if="form.icon">
                                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                                    <i class="el-icon-check" ref="imgicon1"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                                </label>
                                <img :src="form.icon" @click='test(1)' class="wid"/>
                            </div>
                            <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                            <attachment-img ref="img1" type="img" :type2="storeId" @attachment='imgadd1'></attachment-img>
                            <div class="yb_margin">建议尺寸： 800*800px</div>
                        </el-form-item>
                        <el-form-item label="展示图片">
                            <div class="uploadSource bor_de rel flex" v-for="(item, index) in form.media"
                                 :key="index">
                                <label class="statusLabel curs" @mouseenter="enterMultigraph(index,1)" @mouseleave="leaveMultigraph(index,1)">
                                    <i class="el-icon-check" :ref="`list1${index}`"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(item,2,'multigraph')"></i>
                                </label>
                                <img :src="item" @click='test(2)' class="wid img"/>
                            </div>
                            <div class="uploadSource flex-center curs" @click='test(2)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                            <attachment-img ref="img2" type="imgs" :type2="storeId" @attachment='multigraph1'></attachment-img>
                            <div class="yb_margin">建议尺寸： 800*800px</div>
                        </el-form-item>
<!--                        <el-form-item label="详情图片">-->
<!--                            <div class="uploadSource bor_de rel flex" v-if="form.media">-->
<!--                                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">-->
<!--                                    <i class="el-icon-check" ref="imgicon1"></i>-->
<!--                                    <i class="el-icon-close" @click="deleteMultiImage(form.media,1)"></i>-->
<!--                                </label>-->
<!--                                <img :src="form.media" @click='test(1)' class="wid"/>-->
<!--                            </div>-->
<!--                            <div class="uploadSource flex-center curs" v-else @click='test(1)'>-->
<!--                                <i class="el-icon-plus fon_40 color_d9"></i>-->
<!--                            </div>-->
<!--                            <div class="yb_margin">建议尺寸： 800*800px</div>-->
<!--                        </el-form-item>-->
                        <el-form-item label="库存" :required='true'>
                            <el-input v-model="form.stock" placeholder="请输入库存"></el-input>
                        </el-form-item>
                        <el-form-item label="每人每日购买" :required='true'>
                            <el-input v-model="form.dayNum" placeholder="请输入份数" type="number">
                                <template slot="append">份</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="有效期" :required='true'>
                            <span class="mar_lr10">购买后内</span>
                            <el-input v-model="form.days" placeholder="请输入天数" type="number">
                                <template slot="append">天</template>
                            </el-input>
                            <span class="mar_lr10">有效</span>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="flex-g-0 pad_lr_20">
                    <div class="fon_16">常见问题</div>
                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
                        <el-collapse-item title="什么是券包？" name="1">
                            <div>券包是指多种优惠券打包销售，让用户以更优惠的价格买到更高的优惠。</div>
                        </el-collapse-item>
                        <el-collapse-item title="为什么要做券包功能？" name="2">
                            <div>券包对商家是一种营销手段，帮助商家引流、拉新，进一步带动销售。</div>
                        </el-collapse-item>
                        <el-collapse-item title="哪些用户可以购买券包" name="3">
                            <div>满足条件的用户均可购买</div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="fon_16 mar_t20">活动规则</div>
                    <div class="color_9 mar_t10 lh30 fon_13">
                        <div>1.活动仅限在线支付订单；</div>
                        <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>

    </div>
</template>
<script>
    import {rollbagSave,rollbagInfo} from "@/api/plug";
    import {changeDate} from "@/utils/index";
    import attachmentImg from "@/plugins/attachment-img";
    import {mapState} from "vuex";


    export default {
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        components: {attachmentImg,},
        data() {
            return {
                form: {
                    name: '',
                    money: '',

                    coupon:[{
                        fullMoney:'',
                        money:'',
                        num:'',
                    }],

                    type:'1',
                    icon:'',
                    media:[],
                    price:'',
                    stock:'',
                    dayNum:'',
                    days:'',
                },
                timeType:'1',
                timeData: [new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                collapseName:'',

            }
        },
        computed: {
            ...mapState(['storeId']),
        },

        methods: {
            addfullArr() {
                let fullObj = {fullMoney: '', money: '',num:''}
                this.$set(this.form.coupon, this.form.coupon.length, fullObj)
                this.form.price=0;
                this.form.coupon.forEach(item=>{
                    this.form.price+=Number(item.money)*Number(item.num)
                })
            },
            delfullArr(index) {
                this.radioTrue = true
                this.$delete(this.form.coupon, index)
                this.form.price=0;
                this.form.coupon.forEach(item=>{
                    this.form.price+=Number(item.money)*Number(item.num)
                })
            },
            priceChange(){
                this.form.price=0;
                this.form.coupon.forEach(item=>{
                    this.form.price+=Number(item.money)*Number(item.num)
                })
            },
            async edit(){
                const {data} = await rollbagInfo({id: this.id,storeId:this.storeId})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if(data.startTime){
                    this.timeData = [data.startTime,data.endTime]
                }
                // this.form.coupon.forEach((item=>{
                //     this.form.price+= item.money*item.num;
                // }))
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            enterMultigraph(index,i=0){
                //多图删除，i是指文档中的第几个ref多图对象，index图片列表
                // console.log(this.$refs[`list${index}`][index],index)
                this.$refs[`list${i}${index}`][0].style.display = 'none';
            },
            leaveMultigraph(index,i=0){
                this.$refs[`list${i}${index}`][0].style.display = 'inline-block';
            },
            multigraph1(url) {
                if (this.form.media && this.form.media.length > 0) {
                    this.form.media = this.form.media.concat(url.arr)
                } else {
                    this.form.media = url.arr
                }
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form.media.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        if(this.timeData){
                            this.form.startTime  = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        this.form.storeId=this.storeId;
                        const {msg} = await rollbagSave(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="scss">
    .rollbagadd{
        .cusipw .el-input{width: 180px;}
    }
</style>
